<template>
  <div>
    <div class="hmtop">
      <!--顶部导航条 -->
      <div class="am-container header">
        <ul class="message-l">

          <div class="topMessage">
            <div class="menu-hd" v-if="isLogin">
              {{ username }},欢迎您
              <a href="javascript:void(0)" @click="logout">[退出登录]</a>
            </div>
            <div class="menu-hd" v-else>
              亲,请 <a href="javascript:void(0)" target="_top" class="h" @click="goTo('/login')">[登录]</a>
              <a href="javascript:void(0)" target="_top" class="h" @click="goTo('/register')">[免费注册]</a>
            </div>

          </div>
        </ul>
        <ul class="message-r">
          <div class="topMessage home">
            <div class="menu-hd"><a href="#" target="_top" class="h1">商城首页</a></div>
          </div>
          <div class="topMessage my-shangcheng">
            <div class="menu-hd MyShangcheng"><a @click="goPersonCenter()" target="_top"><i
                class="am-icon-user am-icon-fw"></i>个人中心</a></div>
          </div>
          <div class="topMessage mini-cart">
            <div class="menu-hd"><a id="mc-menu-hd" href="#" target="_top"><i
                class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum"
                                                                                      class="h">0</strong></a></div>
          </div>
          <div class="topMessage favorite">
            <div class="menu-hd"><a href="#" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a>
            </div>
          </div>
        </ul>
      </div>

      <!--悬浮搜索框-->

      <div class="nav white">
        <div class="logo"><img src="@/assets/images/logo.png"/></div>
        <div class="logoBig">
          <li><img src="@/assets/images/logobig.png"/></li>
        </div>

        <div class="search-bar pr">
          <a name="index_none_header_sysc" href="#"></a>
          <form>
            <input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索"
                   autocomplete="off" v-model="keyword">
            <input id="ai-topsearch" class="submit am-btn" value="搜索" type="button" index="1" @click="goSearch">
          </form>
        </div>
      </div>

      <div class="clear"></div>
    </div>
    <b class="line" v-if="lineFlag"></b>
    <div class="clear"></div>
  </div>
</template>

<script>
import {logout} from "@/api/login";

export default {
  name: "IndexHeader",
  data() {
    return {
      isLogin: false,
      username: 'satan',
      keyword: ''
    }
  },
  props: ['lineFlag'],
  created() {
    if (this.$store.state.account) {
      this.isLogin = true
      this.username = this.$store.state.account
    }
  },
  methods: {
    goSearch() {
      if (this.keyword!=''&&this.$route.query.keyword!=this.keyword){
        this.$router.push("/keysearch?keyword=" + this.keyword)
      }else if(this.keyword==''&&this.$route.query.keyword!=this.keyword){
        this.$message({
          message: '请输入搜索关键字',
          type: 'warning'
        })
      }
    },
    goPersonCenter(){
      this.$router.push("/person");
    },
    goTo(path) {
      this.$router.push(path);
    },
    logout(){
        this.$store.dispatch('logout').then(res=>{
          this.$message({
            message: '退出成功',
            type: 'success'
          })
          this.$router.go(0);
        }).catch(error=>{
          this.$message({
            message: '退出失败',
            type: 'error'
          })
        })

    }
  }
}
</script>

<style scoped>
.h {
  color: #0e90d2;
  margin-right: 10px;
}
a:hover {
  cursor:pointer
}
</style>